// 立即执行函数
// 监控区域模块tab栏制作
(function () {
  $(".monitor .tabs").on("click", "a", function () {
    $(this).addClass("active").siblings("a").removeClass("active");

    // 选取对应索引号的content
    $(".monitor .content")
      .eq($(this).index())
      .show()
      .siblings(".content")
      .hide();
  });

  // 克隆marquee里面所有的行(row)并添加到最后面
  $(".marquee-view .marquee").each(function () {
    var rows = $(this).children().clone();
    $(this).append(rows);
  });
})();

// 点位分布统计模块
(function () {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".pie"));
  // 2. 指定配置项和数据
  var option = {
    // 提示框组件
    tooltip: {
      // 触发方式 item：放到图形上触发
      trigger: "item",
      // 格式化提示内容
      // a 代表series系列图表名称name
      // b 代表series数据名称 data里面的name
      // c 代表series数据值 data里面的value
      // d 代表当前数据/总数据的比例
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    // 设置饼形图各部分颜色
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff",
    ],
    // 控制图表
    series: [
      {
        // 图表名称
        name: "点位统计",
        // 图表类型
        type: "pie",
        // 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
        // 饼形图半径 可以是像素 也可以是百分比 (基于DOM容器大小) 第一项是内半径 第二项是外半径 (通过它可以实现饼形图大小)
        // 如果radius是百分比 必须加引号
        radius: ["10%", "55%"],
        // 图表中心位置 left 50% top 50% 距离图表DOM容器
        center: ["50%", "50%"],
        // radius 半径模式 另外一种是area面积模式
        roseType: "radius",
        // 数据集 value 数据的值 name 数据的名称
        data: [
          { value: 20, name: "云南" },
          { value: 26, name: "北京" },
          { value: 24, name: "山东" },
          { value: 25, name: "河北" },
          { value: 20, name: "江苏" },
          { value: 25, name: "浙江" },
          { value: 30, name: "四川" },
          { value: 42, name: "湖北" },
        ],
        // 修改饼形图文字相关样式
        label: {
          fontSize: 10,
          color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff",
          ],
        },
        // 修改引导线样式
        labelLine: {
          // 连接扇形图线长
          length: 2,
          // 连接文字线长
          length2: 4,
        },
      },
    ],
  };
  //   3.配置项和数据给实例化对象
  myChart.setOption(option);
  // 4. 浏览器缩放的时候 图表也等比例缩放
  window.addEventListener("resize", function () {
    // 图表调用resize方法
    myChart.resize();
  });
})();

// 用户统计模块
(function () {
  var item = {
    value: 1200,
    // 1. 修改当前柱形的样式
    itemStyle: {
      color: "#254065",
    },
    // 2. 鼠标放到柱子上不高亮显示
    emphasis: {
      itemStyle: {
        color: "#254065",
      },
    },
    // 3. 鼠标经过柱子不显示提示框组件
    tooltip: {
      extraCssText: "opacity: 0",
    },
  };
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".bar"));
  // 2. 指定配置和数据
  var option = {
    color: new echarts.graphic.LinearGradient(
      // (x1,y2) 点到点 (x2,y2) 之间进行渐变
      0,
      0,
      0,
      1,
      [
        { offset: 0, color: "#00fffb" }, // 0 起始颜色
        { offset: 1, color: "#0061ce" }, // 1 结束颜色
      ]
    ),
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(50,50,50,0.7)",
      borderColor: "#333",
      textStyle: {
        color: "#fff",
        fontWeight: 400,
      },
      formatter: (params) => {
        return `${params.seriesName}<br>${params.marker}${params.name}：${params.value} `;
      },
      extraCssText: "border-radius: 5px;padding: 5px",
    },
    grid: {
      left: "0%",
      right: "3%",
      bottom: "3%",
      top: "3%",
      //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
      containLabel: true,
      //   是否显示直接坐标系网格
      show: true,
      //   grid 四条边框的颜色
      borderColor: "rgba(0, 240, 255, .3)",
    },
    xAxis: [
      {
        type: "category",
        data: [
          "上海",
          "广州",
          "北京",
          "深圳",
          "合肥",
          "",
          "......",
          "",
          "杭州",
          "厦门",
          "济南",
          "成都",
          "重庆",
        ],
        axisTick: {
          alignWithLabel: true,
          // 把x轴的刻度隐藏起来
          show: false,
        },
        axisLabel: {
          color: "#4c9bfd",
        },
        // x轴这条线的颜色样式
        axisLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, .3)",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisTick: {
          alignWithLabel: false,
          // 把y轴的刻度隐藏起来
          show: false,
        },
        axisLabel: {
          color: "#4c9bfd",
        },
        // y轴这条线的颜色样式
        axisLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, .3)",
          },
        },
        // y轴分割线的颜色样式
        splitLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, .3)",
          },
        },
      },
    ],
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "60%",
        data: [
          2100,
          1900,
          1700,
          1560,
          1400,
          item,
          item,
          item,
          900,
          750,
          600,
          480,
          240,
        ],
      },
    ],
  };
  // 3. 把配置给实例对象
  myChart.setOption(option);
  // 4. 当浏览器缩放的时候 图表也等比例缩放
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 销售额统计模块
(function () {
  // (1)准备数据
  var data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34],
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98],
    ],
    week: [
      [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
      [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24],
    ],
  };
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".line"));
  // 2. 指定配置和数据
  var option = {
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
      // 通过坐标轴来触发
      trigger: "axis",
      backgroundColor: "rgba(50,50,50,0.7)",
      borderWidth: 0,
      textStyle: {
        color: "#fff",
        fontWeight: 400,
      },
      padding: [10, 5],
    },
    legend: {
      // 距离容器10%
      right: "10%",
      // 修饰图例文字的颜色
      textStyle: {
        color: "#4c9bfd",
      },
      // 如果series 里面设置了name，此时图例组件的data可以省略
      // data: ["邮件营销", "联盟广告"]
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true,
      borderColor: "#012f4a",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      // 去除刻度
      axisTick: {
        show: false,
      },
      // 修饰刻度标签的颜色
      axisLabel: {
        color: "#4c9bfd",
      },
      // 去除x坐标轴的颜色
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      // 去除刻度
      axisTick: {
        show: false,
      },
      // 修饰刻度标签的颜色
      axisLabel: {
        color: "#4c9bfd",
      },
      // 修改y轴分割线的颜色
      splitLine: {
        lineStyle: {
          color: "#012f4a",
        },
      },
    },
    series: [
      {
        name: "预期销售额",
        type: "line",
        stack: "总量",
        // 是否让线条圆滑显示
        smooth: true,
        data: data.year[0],
      },
      {
        name: "实际销售额",
        type: "line",
        stack: "总量",
        smooth: true,
        data: data.year[1],
      },
    ],
  };
  // 3. 把配置和数据给实例对象
  myChart.setOption(option);
  // 4. tab栏切换
  var index = 0;
  // 点击切换效果
  $(".sales .caption").on("click", "a", function () {
    // 索引号
    // 因为caption里面还有<h3>
    // 但是data里面的数据是从0开始取
    // 所以要减去1
    // console.log($(this).index());
    index = $(this).index() - 1;
    // 点击后当前a调用.active
    $(this).addClass("active").siblings("a").removeClass("active");
    // 拿到当前a的自定义属性值
    // 根据拿到的值去找数据
    var arr = data[this.dataset.type];
    // 根据拿到的数据重新渲染series里面的data值
    option.series[0].data = arr[0];
    option.series[1].data = arr[1];
    // 重新把配置好的新数据给实例对象
    myChart.setOption(option);
  });
  // 5. tab栏自动切换效果
  // 开启定时器 每隔3s 自动让a触发点击事件
  var as = $(".sales .caption a");
  var timer = setInterval(function () {
    index++;
    if (index >= 4) {
      index = 0;
    }
    as.eq(index).click();
  }, 3000);
  // 鼠标经过sales 关闭定时器 离开时开启定时器
  $(".sales").hover(
    function () {
      clearInterval(timer);
    },
    function () {
      clearInterval(timer);
      timer = setInterval(function () {
        index++;
        if (index >= 4) {
          index = 0;
        }
        as.eq(index).click();
      }, 3000);
    }
  );
  // 浏览器缩放时 图表也等比例缩放
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 销售渠道模块 雷达图
(function () {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".radar"));
  // 2. 指定配置
  var option = {
    tooltip: {
      show: true,
      // 控制提示框组件的显示位置
      position: ["60%", "10%"],
    },
    radar: {
      indicator: [
        { name: "机场", max: 100 },
        { name: "商场", max: 100 },
        { name: "火车站", max: 100 },
        { name: "汽车站", max: 100 },
        { name: "地铁", max: 100 },
      ],
      // 修改雷达图的大小
      radius: "65%",
      shape: "circle",
      // 分割的圆圈个数
      splitNumber: 4,
      name: {
        // 修饰雷达图文字的颜色
        textStyle: {
          color: "#4c9bfd",
        },
      },
      // 分割的圆圈线条的样式
      splitLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, .5)",
        },
      },
      splitArea: {
        show: false,
      },
      // 坐标轴的线修改为白色半透明
      axisLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, .5)",
        },
      },
    },
    series: [
      {
        name: "北京",
        type: "radar",
        // 填充区域的线条颜色
        lineStyle: {
          normal: {
            color: "#fff",
            width: 1,
            opacity: 0.5,
          },
        },
        data: [[90, 19, 56, 11, 34]],
        // 设置图形标记（拐点）
        symbol: "circle",
        // 这个是设置小圆点大小
        symbolSize: 5,
        // 设置小圆点颜色
        itemStyle: {
          color: "#fff",
        },
        // 让小圆点显示数据
        label: {
          show: true,
          fontSize: 10,
        },
        // 修饰区域填充的背景颜色
        areaStyle: {
          color: "rgba(238, 197, 102, .6)",
        },
      },
    ],
  };
  // 3. 把配置和数据给对象
  myChart.setOption(option);
  // 浏览器缩放的时候 图表也等比例缩放
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 季度模块 饼形图 半圆形
(function () {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".gauge"));
  // 2. 指定数据和配置
  var option = {
    series: [
      {
        name: "销售进度",
        type: "pie",
        radius: ["130%", "150%"],
        // 移动下位置 套住50%文字
        center: ["48%", "80%"],
        // 是否启用防止标签重叠策略
        // avoidLabelOverlap: false
        labelLine: {
          normal: {
            show: false,
          },
        },
        // 饼形图的起始角度为180 注意不是旋转角度
        startAngle: 180,
        // 鼠标经过不需要放大偏移图形
        hoverOffset: 0,
        data: [
          {
            value: 100,
            itemStyle: {
              // 颜色渐变#00c9e0->#005fcl
              color: new echarts.graphic.LinearGradient(
                // (x1,y2)点到点(x2,y2)之间进行渐变
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "#00c9e0" }, // 0 起始颜色
                  { offset: 1, color: "#005fc1" }, // 1 结束颜色
                ]
              ),
            },
          },
          {
            value: 100,
            itemStyle: {
              color: "#12274d",
            },
          },
          {
            value: 200,
            itemStyle: {
              color: "transparent",
            },
          },
        ],
      },
    ],
  };
  // 3. 把数据和配置给实例对象
  myChart.setOption(option);
  // 浏览器缩放时 图表也等比例缩放
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 全国热榜模块
(function () {
  // 1. 准备相关数据
  var hotData = [
    {
      city: "北京",
      sales: "25, 179",
      flag: true,
      brands: [
        // 品牌种类数据
        { name: "可爱多", num: "9,086", flag: true },
        { name: "娃哈哈", num: "8,341", flag: true },
        { name: "喜之郎", num: "6,080", flag: false },
        { name: "八喜", num: "6,080", flag: false },
        { name: "小洋人", num: "6,724", flag: false },
        { name: "好多鱼", num: "2,170", flag: true },
      ],
    },
    {
      city: "河北",
      sales: "23,252",
      flag: false,
      brands: [
        { name: "可爱多", num: "3,457", flag: false },
        { name: "娃哈哈", num: "2,124", flag: true },
        { name: "喜之郎", num: "8,907", flag: false },
        { name: "八喜", num: "6,080", flag: true },
        { name: "小洋人", num: "1,724", flag: false },
        { name: "好多鱼", num: "1,170", flag: false },
      ],
    },
    {
      city: "上海",
      sales: "20,760",
      flag: true,
      brands: [
        { name: "可爱多", num: "2,345", flag: true },
        { name: "娃哈哈", num: "7,109", flag: true },
        { name: "喜之郎", num: "3,701", flag: false },
        { name: "八喜", num: "6,080", flag: false },
        { name: "小洋人", num: "2,724", flag: false },
        { name: "好多鱼", num: "2,998", flag: true },
      ],
    },
    {
      city: "江苏",
      sales: "23,252",
      flag: false,
      brands: [
        { name: "可爱多", num: "2,156", flag: false },
        { name: "娃哈哈", num: "2,456", flag: true },
        { name: "喜之郎", num: "9,737", flag: true },
        { name: "八喜", num: "2,080", flag: true },
        { name: "小洋人", num: "8,724", flag: true },
        { name: "好多鱼", num: "1,770", flag: false },
      ],
    },
    {
      city: "山东",
      sales: "20,760",
      flag: true,
      brands: [
        { name: "可爱多", num: "9,567", flag: true },
        { name: "娃哈哈", num: "2,345", flag: false },
        { name: "喜之郎", num: "9,037", flag: false },
        { name: "八喜", num: "1,080", flag: true },
        { name: "小洋人", num: "4,724", flag: false },
        { name: "好多鱼", num: "9,999", flag: true },
      ],
    },
  ];
  // 2. 根据数据渲染各省热销sup模块
  // (1) 遍历hotData对象
  var supHTML = "";
  $.each(hotData, function (index, item) {
    supHTML += `<li><span>${item.city}</span><span> ${item.sales} <s class=
    ${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;
  });
  // 把生成的5个li字符串给sub dom盒子
  $(".sup").html(supHTML);
  // 3. 当鼠标进入tab的时候
  // 鼠标经过当前的li要高亮显示
  $(".province .sup").on("mouseenter", "li", function () {
    index = $(this).index();
    render($(this));
  });
  // 声明一个函数 里面设置sup当前li高亮显示
  // 这个函数需要传递当前元素进去
  function render(currentEle) {
    currentEle.addClass("active").siblings().removeClass();
    // 拿到当前城市的品牌对象
    // 可以通过hotData[$(this).index()]得到当前城市
    // 可以通过hotData[$(this).index()].brands拿到城市对象的品牌种类
    // 开始遍历品牌数组
    var subHTML = "";
    $.each(hotData[currentEle.index()].brands, function (index, item) {
      // 对应城市的每一个品牌对象
      subHTML += `<li><span>${item.name}</span><span> ${item.num}<s class=
        ${item.flag ? "icon-up" : "icon-down"}
        ></s></span></li>`;
    });
    // 把生成的6个li给sub dom盒子
    $(".sub").html(subHTML);
  }
  // 4. 默认把第一个li处于鼠标经过状态
  var lis = $(".province .sup li");
  lis.eq(0).mouseenter();
  // 5. 开启定时器
  var index = 0;
  var timer = setInterval(function () {
    index++;
    if (index >= 5) {
      index = 0;
    }
    render(lis.eq(index));
  }, 2000);

  $(".province .sup").hover(
    // 鼠标经过事件
    function () {
      clearInterval(timer);
    },
    // 鼠标离开事件
    function () {
      clearInterval(timer);
      timer = setInterval(function () {
        index++;
        if (index >= 5) {
          index = 0;
        }
        render(lis.eq(index));
      }, 2000);
    }
  );
})();
